<%@ page language="java" import="java.util.*,com.fy.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示二维码</title>
		<meta name="keywords" content="二维码,扫一扫">
		<meta name="description" content="二维码扫一扫系统">
		<style>
			*{margin: 0;padding: 0;}
			body{background:url("img/bg.jpg") no-repeat;background-size:cover;font:14px/1.5 "微软雅黑";color:#eee;}
			.btn{width:200px;height:35px;margin:10% auto 0;border:1px solid #abcdef;border-radius:15px;display:block;line-height:35px;text-align:center;text-decoration:none;color:#eee;transition:all 1s;}
			.btn:hover{background:#123;color:#eee;transition:all 1s;}
			.box{width:400px;height:350px;background:#eee;margin:0 auto;border-radius:5px;box-shadow:1px 1px 10px 1px #111;color:#666;text-align:center;display:none;position:absolute;z-index:2;}
			.box h2{margin:16px auto 0;font-size:20px;}
			.box img{margin:16px auto;box-shadow:1px 1px 10px 1px #111;}
			.shadow{width:100%;height:100%;top:0;left:0;background:#666;display:none;position:absolute;opacity:.9;z-index:1;}
		</style>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	</head>
	<body>
		<a href="#" class="btn">显示二维码</a>
		<a href="qrcode.to" class="btn">返回</a>
		<div class="box">
			<h2>扫一扫二维码</h2>
			<p>叶权瑞 QQ:1078735454</p>
		</div>
		<div class="shadow"></div>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script>
			$(function() {
				var _left = ($(window).width() - 400) / 2;
				var _top = ($(window).height() - 350) / 2;
				$.ajax({
					type:"post",
					url:"show.qrcode",
					success:function(data){
						$(".box").find("h2").after("<img src='" + data + "' alt='二维码' width=235 height=235 />");
					}
				});
				//点击btn链接出现shadow层和box盒子
				$(".btn").click(function() {
					$(".shadow").show();
					$(".box").addClass("animated rollIn").css({
						left : _left,
						top : _top
					}).show();
				});
				//点击shadow层box盒子隐藏，shadow层隐藏
				$(".shadow").click(function() {
					$(this).hide();
					$(".box").hide();
					$(".box").show().animate({
						width : "-400px",
						height : "-350px",
						left : "-" + _left + "px",
						top : "-" + _top + "px"
					}, 500, function() {
						$(this).css({
							width : 400,
							height : 350
						}).hide();
					});
				});
			});
		</script>
	</body>
</html>